import { Component, QueryList, ViewChildren } from '@angular/core';
import { DataAnalysisComponent } from '../data-analysis/data-analysis.component';
import { DefaultService } from '../../api';
import { UserService } from '../user.service';
import { DisplayBox } from './display.box';

@Component({
  selector: 'app-watcher',
  templateUrl: './watcher.component.html',
  styleUrls: ['./watcher.component.css']
})
export class WatcherComponent extends DataAnalysisComponent{
  @ViewChildren('box') boxes:QueryList<DisplayBox>;
  options:{clazz:string,name:string,baseType:string,toLoad:boolean,height:number}[]=[];
  type:string = 'chart';
  mediaSettings = [
    {type: 'media',class: 'col-lg-3',height:230,title: '图像(小)'},
    {type: 'media',class: 'col-lg-6',height:340,title: '图像(中)'},
    {type: 'media',class: 'col-lg-12',height:680,title: '图像(大)'}
  ];
  selectedMediaIndex = 0;
  selectedName = "";
  selectedLegend = "";
  constructor(api: DefaultService, me: UserService) {
    super(api, me);
  }

  ngOnInit() {
    this.refreshDevice();
    if(this.me.me==null){
      this.me.meEvent.subscribe(()=>{
        this.load();
      })
    }else{
      this.load();
    }
  }

  addImage(device:string,sensor:string|number){
    this.api.countMedia(device,Number(sensor)).toPromise().then(data=>{
      return this.api.listMedia(device,Number(sensor),0,100).toPromise();
    }).then(data=>{
      const src = this.api.mediaPath(data[0].type,data[0].url);
      const setting = this.mediaSettings[this.selectedMediaIndex];
      let subscription;
      subscription = this.boxes.changes.subscribe((list:QueryList<DisplayBox>)=>{
        list.last.setMedia(setting.height,src);
        subscription.unsubscribe();

      });
      this.options.push({clazz:setting.class,name:`${device}-${sensor.toString()}`,baseType:'media',toLoad:false,height:setting.height});
      this.save();
    })
  }

  addChart(device:string,sensor:string|number) {
    const legend = this.selectedLegend;
    const name = this.selectedName;
    if(this.selectedChartIndex>=this.chartsSettings.length){
      this.boxes.toArray()[this.selectedChartIndex - this.chartsSettings.length]
        .addDataSource(legend,device,Number(sensor),0,50);
      this.boxes.toArray()[this.selectedChartIndex - this.chartsSettings.length]
        .addSockJsSource(legend,device,Number(sensor));

    }else {
      const setting = this.chartsSettings[this.selectedChartIndex];
      let subscription;
      subscription = this.boxes.changes.subscribe((list: QueryList<DisplayBox>) => {
        list.last.addDataSource(legend, device, Number(sensor), 0, 50, setting.type);
        list.last.addSockJsSource(legend, device, Number(sensor), setting.type);
        subscription.unsubscribe();
      });
      this.options.push({clazz: setting.class, name: name, baseType: 'chart', toLoad: false,height:setting.height});
    }
    this.selectedName = "";
    this.selectedLegend = "";
    this.save();
  }

  load(){
    try{
      this.options = JSON.parse(localStorage.getItem(`${this.me.me.username}-watcher`));
      if(this.options===null) this.options = [];
      this.options.forEach(v=>{
        v.toLoad = true;
      })
    }catch (e) {
      this.options = [];
    }
  }

  save(){
    localStorage.setItem(`${this.me.me.username}-watcher`,JSON.stringify(this.options));
  }
}

